<template>
  <div>
    <PageWrapper :contentFullHeight="true">
      <BasicTable
        @register="registerTable"
        :rowSelection="{
          type: 'checkbox',
          selectedRowKeys: checkedKeys,
          onChange: onSelectChange,
        }"
      >
        <!-- 状态标识 -->
        <template #status="{ text: status }">
          <span>
            <Tag
              :color="
                status === '8'
                  ? 'green'
                  : status === '1'
                  ? 'blue'
                  : status === '16'
                  ? 'red'
                  : 'orange'
              "
            >
              {{ proxy.$filters.filterDocumentStatus(status) }}
            </Tag>
          </span>
        </template>
        <!-- 表格顶部左侧区域 -->
        <template #tableTitle>
          <Alert type="info" show-icon>
            <template #message>
              <template v-if="checkedKeys.length > 0">
                <span
                  >{{ t('common.selected') }}{{ checkedKeys.length }}{{ t('common.records') }}</span
                >
                <a-button type="link" @click="checkedKeys = []" size="small">{{
                  t('common.clear')
                }}</a-button>
              </template>
              <template v-else>
                <span>{{ t('common.noSelected') }}</span>
              </template>
            </template>
          </Alert>
        </template>
        <!-- 右侧 -->
        <template #toolbar>
          <!-- 删除 -->
          <a-button
            type="danger"
            @click="handleDeleteDoc"
            :disabled="checkedKeys.length == 0"
            v-auth="['documentManager:recycle:delete']"
          >
            {{ t('routes.table.cancellationList.delete') }}
          </a-button>
          <!-- 还原 -->
          <a-button
            type="primary"
            @click="handleRestoreDoc"
            :disabled="checkedKeys.length == 0"
            v-auth="['documentManager:recycle:restore']"
          >
            {{ t('routes.table.cancellationList.restore') }}
          </a-button>
        </template>
        <!-- 操作 -->
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                tooltip: t('routes.table.cancellationList.viewProcess'),
                icon: 'ant-design:eye-outlined',
                onClick: handleView.bind(null, record),
                auth: 'documentManager:recycle:process',
              },
            ]"
          />
        </template>
      </BasicTable>
      <!-- 查看流程实例 -->
      <ProcessInstance @register="registerModal" />
      <!-- 还原目录 -->
      <unbindModal @register="registerUnbindModal" @success="restoreDir" />
    </PageWrapper>
  </div>
</template>

<script setup lang="ts">
  import { ref, getCurrentInstance } from 'vue';
  import { Alert, Tag } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { GetPdmObjRecycles, DeleteAbolishedDoc } from '/@/api/demo/document';
  import { getAbolishColumns, getAbolishConfig } from './tableData';
  import { useMessage } from '/@/hooks/web/useMessage';

  // 引入页面
  import ProcessInstance from '/@/views/components/ProcessInstance.vue';
  import unbindModal from '../unbindModal.vue';

  const { t } = useI18n();
  const { proxy }: any = getCurrentInstance();
  const { createMessage } = useMessage();

  const checkedKeys = ref<Array<string | number>>([]); // 选中的键
  const selectedRows = ref<any>([]); // 选中的行数据

  // 当选中的行发生改变时调用
  const onSelectChange = (selectedRowKeys: (string | number)[], selectedRowsData: any) => {
    checkedKeys.value = selectedRowKeys; // 更新选中的键
    selectedRows.value = selectedRowsData; // 更新选中的行数据
  };

  // 查看废止流程
  const handleView = (record) => {
    openPrecessModal(true, { wfInsId: record.source });
  };

  // 删除文档
  const handleDeleteDoc = async () => {
    await DeleteAbolishedDoc(checkedKeys.value);
    createMessage.success(t('routes.table.cancellationList.deleteSuccess'));
    reloadTable();
  };

  // 还原文档
  const handleRestoreDoc = async () => {
    openUnbindModal(true, { treeKey: checkedKeys.value, type: '废止还原' });
  };

  // 还原目录
  const restoreDir = () => {
    createMessage.success(t('routes.table.cancellationList.restoreSuccess'));
    reloadTable();
  };

  // 表格初始化
  const [registerTable, { reload: reloadTable }] = useTable({
    titleHelpMessage: 'cancellationAreaIndex',
    columns: getAbolishColumns(), // 表格列配置
    api: GetPdmObjRecycles, // 表格数据请求方法
    bordered: true,
    useSearchForm: true,
    formConfig: getAbolishConfig(), // 表单配置
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: false,
    rowKey: 'codeId',
    maxHeight: 220,
    actionColumn: {
      width: 100,
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const [registerModal, { openModal: openPrecessModal }] = useModal();
  const [registerUnbindModal, { openModal: openUnbindModal }] = useModal();
</script>

<style scoped></style>
